<template>
    <div class="rootBox">
        <Panel class="card rain" :title="'降雨量'">
            <EchartsLine class="echarts-line" :recive-data="lineData" />
        </Panel>
        <Panel class="card total" :title="'传感器接入统计'">
            <EchartsPieCollect class="echarts-collect" :recive-data="collectData" />
        </Panel>
        <Panel class="card area" :title="'尾矿库地区分布'">
            <Complex class="complex" :recive-data="complex1Data" />
        </Panel>
        <Panel class="card overhead" :title="'投顶库地区分布'">
            <Complex class="complex" :recive-data="complex2Data" />
        </Panel>
        <Panel class="card statue" :title="'尾矿运行状态'">
            <EchartsBarMulti class="bar-multi" />
        </Panel>
    </div>
</template>

<script>
import Panel from "../../../../component/Panel";
import EchartsLine from "./component/EchartsLine";
import EchartsPieCollect from "./component/EchartsPieCollect";
import Complex from "./component/Complex";
import EchartsBarMulti from "./component/EchartsBarMulti";
export default {
    components: {
        Panel,
        EchartsLine,
        EchartsPieCollect,
        Complex,
        EchartsBarMulti,
    },
    data() {
        return {
            lineData: {
                xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
                yAxis: [20, 19, 12, 15, 20, 12, 15, 16, 17, 15, 16, 15, 14, 15],
            },
            collectData: {
                gnss: {
                    //表面仪
                    label: "表面位(GNSS)",
                    normal: 100,
                    fault: 100,
                },
                inclinometer: {
                    //测斜仪
                    label: "内部位移(测斜仪)",
                    normal: 80,
                    fault: 150,
                },
                osmometer: {
                    //渗压仪
                    label: "浸润线(渗压仪)",
                    normal: 96,
                    fault: 200,
                },
                slope: {
                    //干滩计
                    label: "干滩长度(干滩计)",
                    normal: 90,
                    fault: 200,
                },
            },
            complex1Data: [
                {
                    name: "福州",
                    value: 100,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#054B96",
                            },
                            {
                                offset: 1,

                                color: "#05F9F7",
                            },
                        ],
                    },
                },
                {
                    name: "厦门",
                    value: 50,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#13E1B5",
                            },
                            {
                                offset: 1,

                                color: "#05FAF8",
                            },
                        ],
                    },
                },
                {
                    name: "泉州",
                    value: 72,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#FF665A",
                            },
                            {
                                offset: 1,

                                color: "#FF965A",
                            },
                        ],
                    },
                },
                {
                    name: "莆田",
                    value: 44,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#FF675A",
                            },
                            {
                                offset: 1,

                                color: "#9B66FD",
                            },
                        ],
                    },
                },
                {
                    name: "漳州",
                    value: 77,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#FEFF0A",
                            },
                            {
                                offset: 1,

                                color: "#E19A32",
                            },
                        ],
                    },
                },
            ],
            complex2Data: [
                {
                    name: "福州头顶库",
                    value: 100,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#054B96",
                            },
                            {
                                offset: 1,

                                color: "#05F9F7",
                            },
                        ],
                    },
                },
                {
                    name: "厦门头顶库",
                    value: 50,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#13E1B5",
                            },
                            {
                                offset: 1,

                                color: "#05FAF8",
                            },
                        ],
                    },
                },
                {
                    name: "泉州头顶库",
                    value: 72,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#FF665A",
                            },
                            {
                                offset: 1,

                                color: "#FF965A",
                            },
                        ],
                    },
                },
                {
                    name: "莆田头顶库",
                    value: 44,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#FF675A",
                            },
                            {
                                offset: 1,

                                color: "#9B66FD",
                            },
                        ],
                    },
                },
                {
                    name: "漳州头顶库",
                    value: 77,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#FEFF0A",
                            },
                            {
                                offset: 1,

                                color: "#E19A32",
                            },
                        ],
                    },
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.rootBox {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    .card {
        width: 343px;
        height: 100%;
        // border: 1px solid red;
        .echarts-line {
            width: 100%;
            height: 100%;
            // border: 1px solid red;
            margin: 0 auto;
        }
        .echarts-collect {
            width: 100%;
            height: 100%;
            // border: 1px solid red;
        }
        .complex {
            width: 100%;
            height: 100%;
            // border: 1px solid red;
        }
        .bar-multi {
            width: 100%;
            height: 100%;
            // border: 1px solid red;
        }
    }
}
</style>
